<template>
	<view class="">
		<u-popup mode="bottom" v-model="show" :closeable="true" @close="close">
			<view class="tc p30 border-b fs30 fw-500 color-000">支付</view>
			<view class="p30 color-000">
				<view class="tc fs50 pt80 pb70">¥ {{payData.money}}</view>
				<view class="pt26 pb26 border-b flex row-between" @tap='type=item.type' v-for="(item,index) in list"
					:key="index">
					<view class="flex">
						<u-icon :name="item.icon" :color="item.color" size="50"></u-icon>
						<view class="fs24 fw-500 ml20">{{item.name}}</view>
					</view>
					<u-icon name="checkmark-circle-fill" :color="$zs" v-if="type==item.type" size="40"></u-icon>
					<u-icon name="checkmark-circle" v-else color="#ccc" size="40"></u-icon>
				</view>
				<view class="h60"></view>
				<u-button type="warning" ripple shape="circle" @click="submit">立即支付</u-button>
			</view>
		</u-popup>
		<password ref="password" @finish="password=$event,pay()"  />
	</view>
</template>

<script>
	//<payment v-model="payData" depositShow @success="" />
	// this.payData={
	// 	enroll_id:enroll_id,
	// 	api:'/api/shopapp.activity/advertPay',
	// 	money:this.data.price,
	// }
	// this.payData = {
	// 	...res.data,
	// 	target: res.data.trade_sn,
	// 	money: res.data.total_amount,
	// 	target_type: res.data.target_type,
	// }
	
	//<payment ref="pay" depositShow @success="" />
	// this.$refs.pay.open({
	// 	money: this.money,
	// ...res.data
	// })
	
	export default {
		name: "payment",
		emits: ["update:modelValue", "input", "close", "cancel", 'type'],
		props: {
			value: {
				default: ''
			},
			modelValue: {
				default: ''
			},
			depositShow: {
				type: Boolean,
				default: false
			}
		},
		computed: {

		},
		data() {
			return {
				list: [],
				payData: '',
				show: false, //弹窗开关
				type: 'wechat', //支付类型
				success: false, //支付状态
				password: '',
			};
		},
		watch: {
			type(val) {
				this.$emit('type', val)
			},
			modelValue(val) {
				if (val) this.payData = val
			},
			value(val) {
				if (val) this.payData = val
			},
			payData(val) {
				if (val) this.init()
			},
		},
		methods: {
			open(e = '') {
				this.payData = e
			},
			init() {
				let arr = this.getPay()
				if (!arr.length) return this.$msg('没有可用的支付方式')
				this.type = arr[0]?.type || "" //默认第一项
				this.list = arr //支付数组
				this.show = true //唤起弹窗
				this.success = false //重置支付状态
			},
			getPay() {
				let that = this
				let arr = [{
					"name": '余额',
					testName: '余额',
					icon: 'rmb-circle-fill',
					color: '#ffbf2c',
					type: 'deposit',
					show() {
						return that.depositShow
					}
				}, {
					"name": '微信',
					testName: '微信公众号',
					icon: 'weixin-circle-fill',
					color: '#6bcc03',
					type: 'official',
					show() {
						// #ifdef H5
						//如果是微信公众号环境
						return window.navigator.userAgent.toLowerCase().indexOf('micromessenger') != -1
						// #endif
					}
				}, {
					"name": '微信',
					testName: '微信小程序',
					icon: 'weixin-circle-fill',
					color: '#6bcc03',
					type: 'miniapp',
					show() {
						// #ifdef MP-WEIXIN
						return true
						// #endif
					}
				}, {
					"name": '微信',
					testName: 'APP微信',
					icon: 'weixin-circle-fill',
					color: '#6bcc00',
					type: 'wechat',
					show() {
						// #ifdef APP
						return true
						// #endif
					}
				}, {
					"name": '支付宝',
					testName: 'APP支付宝',
					icon: 'zhifubao-circle-fill',
					color: '#33c2fd',
					type: 'alipay',
					show() {
						// #ifdef APP
						return true
						// #endif
					}
				}]
			
				if (this.$global.test) { //测试情况下
					arr = arr.map(e => {
						//改变测试名称
						e.name = e.testName
						return e
					})
				} else {
					arr = arr.filter(e => e.show())
				}
				//后端隐藏
				let payList = this.$config.pay_types || ''
				if (payList) arr = arr.filter(e => payList.includes(e.type))
				return arr
			},
			submit() {
				if (['deposit'].includes(this.type)) { //输入密码
					return this.$refs.password.open()
				}
				this.pay()
			},
			pay() {
				let {
					api,
					...params
				} = this.payData
				params.pay_type = this.type //支付类型
				params.trade_pwd = this.password //支付类型
				this.$request(this.payData.api || '/payment/pay/pay', params).then(res => {
					let payData = {}
					switch (params.pay_type) {
						case 'deposit': //余额
							this.$msg(res.msg)
							this.pay_success()
							return
							break;
						case 'wechat': //app微信
							payData.provider = 'wxpay'
							payData.orderInfo = JSON.parse(res.data.payParams)
							break;
						case 'alipay': //app支付宝
							payData.provider = 'alipay'
							payData.orderInfo = res.data.payParams
							break;
						case 'miniapp': //微信小程序
							payData = res.data.payParams
							break;
						default: //其他
							payData = res.data.payParams
							break;
					}
					uni.requestPayment({
						...payData,
						success: function(res) {
							that.$msg('支付成功')
							that.pay_success()
						},
						fail: function(err) {
							that.$msg('取消支付')
						},
					});
				})
			},
			pay_success() {
				this.success = true
				this.$emit('success', '')
				this.show = false //关闭选择支付弹窗支付
			},
			close() {
				this.$emit('input', '') //
				this.$emit('close', this.success)
				if (!this.success) {
					this.$emit('cancel', '')
				}
			}
		}
	}
</script>

<style lang="scss">

</style>